import { useState } from "react";
import { Modal, Tag, message } from "antd";
import NewAdd from "./components/newAdd";
import MenuPermission from "./components/menuPermission";
import DataPermission from "./components/dataPermission";
import Modify from "./components/modify";
import { getRolePage, deleteRole } from "@/api/system/role/index";
import { exportToExcel } from "@/utils/util";
import { useTranslation } from "react-i18next";
import { BasicColumn, FormSchema, BasicTable, useTable, TableAction } from "@/components/Table";
import { Button } from "@/components/Button";
import { IconEnum } from "@/enums/appEnum";

const role = () => {
	const { t } = useTranslation();
	//新建弹窗
	const [isNewAdd, setIsNewAdd] = useState(false);
	//修改弹窗
	const [isModify, setModify] = useState(false);
	//菜单权限弹窗
	const [isMenuPermission, setIsMenuPermission] = useState(false);
	//数据权限弹窗
	const [isDataPermission, setIsDataPermission] = useState(false);
	const [roleId, setRoleId] = useState(0);
	const formSchemaBottom: FormSchema[] = [
		{
			label: t("system.role.role_name"),
			component: "Input",
			field: "field"
		},
		{
			label: t("system.role.role_identifier"),
			component: "Input",
			field: "code"
		},
		{
			label: t("system.role.status"),
			field: "status",
			component: "Select",
			labelWidth: 190,
			componentProps: {
				options: [
					{ label: t("system.role.open"), value: 0 },
					{ label: t("system.role.close"), value: 1 }
				]
			}
		},
		{
			label: t("system.role.role_identifier"),
			component: "DatePicker",
			field: "createTime"
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t("system.role.role_number"),
			dataIndex: "id"
		},
		{
			title: t("system.role.role_name"),
			dataIndex: "field"
		},
		{
			title: t("system.role.role_identifier"),
			dataIndex: "code"
		},
		{
			title: t("system.role.role_type"),
			dataIndex: "type",
			render: (_, { type }) => (
				<>
					{type == 2 ? (
						<Tag color="success">{t("system.role.custom")}</Tag>
					) : (
						<Tag color="error">{t("system.role.built_in")}</Tag>
					)}
				</>
			)
		},
		{
			title: t("system.role.display_order"),
			dataIndex: "sort"
		},
		{
			title: t("system.role.status"),
			dataIndex: "status",
			render: (_, { status }) => (
				<>
					{status == 0 ? <Tag color="success">{t("system.role.open")}</Tag> : <Tag color="error">{t("system.role.close")}</Tag>}
				</>
			)
		},
		{
			title: t("system.role.creation_time"),
			dataIndex: "createTime"
		},
		{
			title: t("system.role.operate"),
			dataIndex: "action",
			fixed: "right",
			render: (_, record) => (
				<TableAction
					actions={[
						{
							label: t("system.role.modify"),
							onClick: showModifyModal.bind(null, record)
						}
					]}
					dropDownActions={[
						{
							label: t("system.role.menu_permission"),
							onClick: showMenuPermission.bind(record.id)
						},
						{
							label: t("system.role.data_permission"),
							onClick: showDataPermission.bind(record.id)
						},
						{
							label: t("system.role.delete"),
							popConfirm: {
								title: t("system.role.confirm_delete"),
								confirm: deleteRoleFn.bind(record.id)
							}
						}
					]}
				/>
			)
		}
	];
	const [registerTable, { reload, getDataSource }] = useTable({
		title: t("system.role.role_list"),
		api: getRolePage,
		columns,
		formConfig: {
			schemas: formSchemaBottom,
			labelWidth: 120
		},
		useSearchForm: true
	});
	//开启新增弹窗
	const showNewModal = () => {
		setIsNewAdd(true);
	};
	//开启修改弹窗
	const showModifyModal = (record: Recordable) => {
		setRoleId(record.id);
		setModify(true);
	};
	//开启修改角色菜单权限弹窗
	const showMenuPermission = (id: number) => {
		setRoleId(id);
		setIsMenuPermission(true);
	};
	//开启编辑角色数据权限
	const showDataPermission = (id: number) => {
		setRoleId(id);
		setIsDataPermission(true);
	};
	//关闭新增弹窗
	const handleNewAddOk = () => {
		reload();
		setIsNewAdd(false);
	};
	//关闭修改弹窗
	const handleModifyOk = () => {
		reload();
		setModify(false);
	};
	//关闭修改角色菜单权限弹窗
	const handleMenuPermissionOk = () => {
		setIsMenuPermission(false);
	};
	//关闭编辑角色数据权限
	const handleDataPermissionOk = () => {
		setIsDataPermission(false);
	};
	//关闭新增弹窗
	const handleNewAddCancel = () => {
		setIsNewAdd(false);
	};
	//关闭修改弹窗
	const handleModifyCancel = () => {
		setModify(false);
	};
	//关闭修改角色菜单权限弹窗
	const handleMenuPermissionCancel = () => {
		setIsMenuPermission(false);
	};
	//关闭编辑角色数据权限
	const handleDataPermissionCancel = () => {
		setIsDataPermission(false);
	};

	//删除角色
	const deleteRoleFn = async (id: number) => {
		await deleteRole(id);
		message.success(t("system.role.delete_success"));
		reload();
	};

	//表格导出
	const exportExcel = () => {
		exportToExcel(getDataSource(), t("system.role.export_role"));
	};

	return (
		<div>
			<BasicTable register={registerTable}>
				<div slot="toolbar">
					<Button type="primary" preIcon={IconEnum.ADD} onClick={showNewModal}>
						{t("system.role.add_new")}
					</Button>
					<Button preIcon={IconEnum.EXPORT} onClick={exportExcel}>
						{t("system.role.export")}
					</Button>
				</div>
			</BasicTable>
			{/* 弹窗 */}
			<Modal open={isNewAdd} title={t("system.role.add_new")} footer={null} onCancel={handleNewAddCancel}>
				<NewAdd onOk={handleNewAddOk} onCancel={handleNewAddCancel}></NewAdd>
			</Modal>
			<Modal open={isModify} title={t("system.role.modify")} footer={null} onCancel={handleModifyCancel}>
				<Modify id={roleId} onOk={handleModifyOk} onCancel={handleModifyCancel}></Modify>
			</Modal>
			<Modal
				open={isMenuPermission}
				title={t("system.role.modify_menu_permission")}
				onOk={handleMenuPermissionOk}
				onCancel={handleMenuPermissionCancel}
			>
				<MenuPermission id={roleId}></MenuPermission>
			</Modal>
			<Modal
				open={isDataPermission}
				title={t("system.role.edit_data_permission")}
				footer={null}
				onCancel={handleDataPermissionCancel}
			>
				<DataPermission onOk={handleDataPermissionOk} onCancel={handleDataPermissionCancel} id={roleId}></DataPermission>
			</Modal>
		</div>
	);
};
export default role;
